<template>
  <div class="item-popover">

    <span class="open-link" v-if="firstData" @click="handelClick(firstData)">{{ getText(firstData) }}</span>

    <el-popover placement="top" trigger="click" v-if="popoverData.length > 0">
      <ul class="im-popover-list">
        <li v-for="(v, i) in popoverData" :key="i" class="popover-item">
          <span class="open-link" @click="handelClick(v)">{{ getText(v) }}</span>
        </li>
      </ul>
      <span slot="reference" class="popoverData-length">+{{ popoverData.length }}</span>
    </el-popover>

  </div>
</template>

<script>
export default {
  name: 'ItemPopover',
  props: {
    width: {
      type: Number | String
    },
    type: {
      type: String,
      default: ''
    },
    scope: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
    }
  },
  computed: {
    list() {
      if (this.type === 'eventNo') return this.scope.row.bizRelInfo || []
      if (this.type === 'bizRelTaskInfo') return this.scope.row.bizRelTaskInfo || []
      if (this.type === 'bizRelProductInfo') return this.scope.row.bizRelProductInfo || []
      return []
    },

    firstData() {
      let width = Number(this.width)
      if (width <= 100) return null
      return this.list[0]
    },

    popoverData() {
      let width = Number(this.width)
      if (width <= 100) return this.list
      return this.list.filter((v, i) => i > 0)
    }
  },
  methods: {
    getText(data) {
      let type = this.type
      if (type === 'eventNo') return data.bizNo
      if (type === 'bizRelTaskInfo') return data.bizNo
      if (type === 'bizRelProductInfo') return data.name
    },
    handelClick(item){
      this.$emit('popoverClick',this.type,item)
    }
  }
}
</script>

<style scoped lang='scss'>
.item-popover {
  width: 100%;
  display: flex;

  .open-link {
    color: $color-primary-light-6;
    cursor: pointer;
    @include text-ellipsis();
  }

  .popoverData-length {
    color: $color-primary-light-6;
    margin-left: 4px;
    cursor: pointer;
  }

}
</style>

<style lang="scss">
.im-popover-list {
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;

  .popover-item {
    margin-bottom: 4px;

    &:last-child {
      margin-bottom: 0;
    }

    .open-link {
      color: $color-primary-light-6;
      cursor: pointer;
      max-width: 100%;
      @include text-ellipsis();
    }
  }
}
</style>